import './globals.css'
import { Figtree } from 'next/font/google'
import SideBar from '@/components/SideBar'
import SupabaseProvider from '@/providers/SupabaseProvider'
import UserProvider from '@/providers/UserProvider'
import ModalProvider from '@/providers/ModalProvider'
import ToasterProvider from '@/providers/ToasterProvider'
import getSongsByUserId from '@/actions/getSongsByUserId'

const font = Figtree({ subsets: ['latin'] })

export const metadata = {
  title: '在线音乐播放器',
  description: 'Listen to Mussic!',
}

//防止此布局的页面被缓存
export const revalidate = 0;

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  //根据请求头的cookies用户进行 获取个人歌曲信息
  const userSongs = await getSongsByUserId();

  return (
    <html lang="en">
      <body className={font.className}>
        <ToasterProvider/>
        <SupabaseProvider>
          {/* User上下文封装后的组件 */}
          <UserProvider>
            {/* 模态框相关的provider组件 */} 
            <ModalProvider/>
            {/* 将获取后的个人歌曲清单显示在侧边栏 */}
            <SideBar songs={userSongs}>
              {children}
            </SideBar>
          </UserProvider>
        </SupabaseProvider>
      </body>
    </html>
  )
}
